<template>
  <component :is="linkType" v-bind="linkProps(to)">
    <slot />
  </component>
</template>

<script>
// import { defineComponent, computed, defineProps } from "vue";
import { isExternal } from '@/utils/index';

export default defineComponent({
  name: 'AppLink',
  inheritAttrs: false,

  props: {
    to: {
      type: Object,
      required: true,
    },
  },

  setup(props) {
    const isExternalLink = computed(() => {
      return isExternal(props.to.path || '');
    });

    const linkType = computed(() =>
      isExternalLink.value ? 'a' : 'router-link',
    );

    const linkProps = (to) => {
      if (isExternalLink.value) {
        return {
          href: to.path,
          target: '_blank',
          rel: 'noopener noreferrer',
        };
      }
      return { to: to };
    };

    return {
      isExternalLink,
      linkType,
      linkProps,
    };
  },
});
</script>
